<template>
	<view class="container">
        <!--默认loading加载页-->
		<u-loading-page :loading="loadingPage" iconSize="60" loadingText=" " loadingColor="#42b983"></u-loading-page>

		<view class="content" v-if="!loadingPage">
            <!--文章内容 S-->
			<view class="detail">
				<view class="title">{{result.title}}</view>
				<view class="info">
					<view class="source-date">
						<text class="source" v-if="result.source_url" @tap="copyText(result.source_url)">{{result.source}}</text>
						<text class="source" v-else>{{result.source}}</text>
						<text class="date hidden">{{result.create_time}}</text>
					</view>
					<view class="read">阅读 {{result.read}}</view>
				</view>
				<view class="desc">
                    <view class="u-content">
                        <u-parse :content="result.content"></u-parse>
                    </view>
                </view>
				<view class="declaration" v-if="result.source_url">
					本文转载至{{result.source}}，
					<text @tap="copyText(result.source_url)">点此可查看原文链接。</text>
					如有侵权，请联系我们，我们将在最短的时间内处理。
				</view>
			</view>
            <!--文章内容 E-->
            <!--评论列表 S-->
			<view class="comment" v-if="!loadingPage && comment">
				<view class="title">
					<text>全部评论</text>
					<text class="count" v-if="comment.count > 0">({{comment.count}})</text>
				</view>
                <!--评论数据列表，瀑布流-->
                <mescroll-body ref="mescrollRef" @init="mescrollInit" height="auto" @down="downCallback" @up="upCallback" :up="upOption">
                    <me-comment :list="comment"></me-comment>
                </mescroll-body>
			</view>
            <!--评论列表 E-->

			<view class="float-empty"></view>

            <!--发表评论 S-->
			<view class="comment-bar" v-show="!showAddComment && showCommenBar">
				<view class="input" @tap="initAddComment(true)"><text>发表评论</text></view>
				<view class="operate">
					<navigator :url="'comment?article_id=' + id" class="info" hover-class="none">
                        <u-icon name="chat" color="#555" size="33"></u-icon>
						<text class="count" v-if="comment.count > 0">{{comment.count}}</text>
					</navigator>
					<view class="like">
                        <u-icon @tap="like()" :class="result.is_like?'on':''" :name="!result.is_like?'thumb-up':'thumb-up-fill'" :color="result.is_like?$config.color:'#555'" size="33"></u-icon>
					</view>
					<view class="favorite">
                        <u-icon @tap="favorite()" :class="result.is_favorite?'on':''" :name="!result.is_favorite?'star':'star-fill'" :color="result.is_favorite?$config.color:'#555'" size="33"></u-icon>
					</view>
					<button open-type="share" class="share" @tap="share"><u-icon name="share" color="#555" size="33"></u-icon></button>
				</view>
			</view>
            <!--发表评论 E-->

            <!--回复/发表评论，只在小程序(微信 支付宝 百度)进行编译 S-->
			<!-- #ifdef MP -->
			<view class="bg-masker" v-if="showAddComment" @tap="initAddComment(false)"></view>
			<view class="add-comment" v-if="showAddComment">
				<view class="info">
					<view class="input">
						<textarea
							:show-confirm-bar="false"
							:cursor-spacing="20"
							ref="commentContent"
							:maxlength="200"
							:auto-height="true"
							:fixed="true"
							:focus="showAddComment"
							v-model.trim="commentContent"
							placeholder-class="input-bg"
							:placeholder="replyCommentId > 0 ? '回复 ' + replyNickname + '：' : '发表评论'"
						/>
					</view>
					<view class="add">
						<button class="mini-btn" type="primary" size="mini" @click="addCommentOrReply()">{{replyCommentId > 0 ? '回复' : '发表'}}</button>
					</view>
				</view>
			</view>
			<!-- #endif -->
            <!--回复/发表评论，只在小程序(微信 支付宝 百度)进行编译 E-->

            <!--发表评论/回复，不在小程序编译,只在ios/安卓/h5编译 S-->
			<!-- #ifndef MP -->
            <u-popup :show="showAddComment" :round="10" mode="top" @close="initAddComment(false)" @open="open">
				<view class="add-comment">
					<view class="info">
						<view class="input">
							<textarea
								:cursor-spacing="20"
								:show-confirm-bar="false"
								:auto-height="true"
								:fixed="true"
								:maxlength="200"
								:focus="addCommentFocus"
								v-model.trim="commentContent"
								placeholder-class="input-bg"
								:placeholder="replyCommentId > 0 ? '回复 ' + replyNickname + '：' : '发表评论'"
							/>
						</view>
						<view class="add">
							<button class="mini-btn" type="primary" size="mini" @click="addCommentOrReply()">{{replyCommentId > 0 ? '回复' : '发表'}}</button>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- #endif -->
            <!--发表评论/回复，不在小程序编译,只在ios/安卓/h5编译 E-->
		</view>

	</view>
</template>

<script>
//本插件来源: https://ext.dcloud.net.cn/plugin?id=1988

//评论数据列表瀑布流，import加载文件
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import meComment from "./me-comment.vue";

export default {
    //评论数据列表瀑布流: 使用mixin（在main.js自动注册全局组件)
    mixins: [MescrollMixin],
    //评论数据列表瀑布流: 注册组件 meComment
    components: {
        meComment
    },
	data() {
		return {
		    //文章ID（通过url路径传递过来的参数）
			id: 0,
            //API获取的数据存放至result
			result: { comment: { count: 0, list: [] } },
            //默认loading加载页状态 (默认为true)
            loadingPage: true,
            //评论数据列表瀑布流: 数据列表变量
            comment: [],
            //评论数据列表瀑布流: 设置api路径
            api_url : 'demo/article_comment',
            //评论数据列表瀑布流: 上拉时的配置参数
            upOption:{
                //不自动加载
                auto:false,
                //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据)，显示无更多数据会不好看; 默认5
                noMoreSize: 2,
                page: {
                	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                	size: 2 // 每页数据的数量
                },
                //为空时的设置
                empty:{
                    //空布局的图标路径 (支持网络路径)
                    //icon: 'https://cdn.uviewui.com/uview/empty/search.png',
                    //提示文字
                    tip: '~暂无评论，快来抢占沙发吧~',
                    //按钮文字 (为空则表示不要按钮)
                    btnText: ''
                }
            },
            //评论相关的变量
			showAddComment: false,
			showCommenBar: true,
			addCommentFocus: false,
			commentContent: '',
			replyCommentId: 0,
			replyNickname: '',
            //在vue页面中的view模板中使用系统设置参数$config则需要在data()中定义一下变量: $config:[], 然后就可以在模板中正常使用了:{{$config.color}}
            $config:[]
		};
	},
	onShow(e) {
        //来源是登录时更新
		let source = uni.getStorageSync('source');
		if (source == 'login') {
			uni.removeStorageSync('source');
			this.getData();
		}

		//当前页面
		if (!uni.getStorageSync('source')) {
			uni.setStorageSync('source', 'demo/article/detail');
		}
	},
    /**
     * 页面onLoad加载事件
     */
	onLoad(param) {
	    //文章ID（通过url路径传递过来的参数）
		if (param.id > 0)
			this.id = param.id;
		//获取api数据
		this.getData();
	},
    /**
     * 下拉刷新事件
     */
	onPullDownRefresh() {
		uni.showLoading({
			title: '刷新中'
		});
		//重置评论列表变量
        this.comment = [];
		//获取API数据
		this.getData();
	},
	/**
     * 小程序分享
     */
	onShareAppMessage() {
		return {
			path: '/pages/demo/article/detail?id=' + this.result.id,
			success: function(e) {},
			title: this.result.title,
			imageUrl: this.result.photo_url
		};
	},
	methods: {
		/**
         * 加载数据: 获取文章详情
         */
		getData() {
			this.ajax({
                url: 'demo/article_detail',
                data: {
                    id: this.id,
                }
            }).then(res => {
                if (res.code == 200) {
                    // console.log(this.result);
                    //文章基础数据
                    this.result = res.data;
                    //页面页面标题：更新标题为文章标题
                    uni.setNavigationBarTitle({
                        title: this.result.title
                    });
                    //关闭默认loading加载页面
                    this.loadingPage = false;
                    //停止下拉刷新动画事件
                    uni.stopPullDownRefresh();
                    //停止下拉刷新时显示的刷新中的loading动画提示
                    uni.hideLoading();
                } else {
                    this.$alert(res.msg);
                }
            }).catch((err)=>{
                console.log('错误提示: ',err);
            });

		},
		/**
         * 点赞
         */
		like() {
			this.ajax({
				url: this.$api.article.like,
				data: {
					article_id: this.id
				},
				method: 'POST',
				dataType: 'json',
				success: res => {
					console.log('res');
					if (res.code == 0) {
						this.result.is_like = !this.result.is_like;
						let msg = this.result.is_like ? '点赞成功' : '已取消点赞';
						this.$alert(msg, 'success');
					} else {
						this.$alert(res.msg, 'warning');
					}
				}
			});
		},
		/**
         * 评论点赞
         */
		commentLike(comment_id, index) {
			this.ajax({
				url: this.$api.article.commentLike,
				data: {
					comment_id: comment_id
				},
				method: 'POST',
				dataType: 'json',
				success: res => {
					if (res.code == 0) {
						if (this.comment.list[index].is_like) {
							this.comment.list[index].is_like = false;
							this.comment.list[index].like_count -= 1;
						} else {
							this.comment.list[index].is_like = true;
							this.comment.list[index].like_count += 1;
						}
						let msg = this.comment.list[index].is_like ? '点赞成功' : '已取消点赞';
						this.$alert(msg);
					} else {
						this.$alert(res.msg);
					}
				}
			});
		},
		/**
         * 收藏
         */
		favorite() {
			this.ajax({
				url: this.$api.article.favorite,
				data: {
					article_id: this.id
				},
				method: 'POST',
				dataType: 'json',
				success: res => {
					console.log('res');
					if (res.code == 0) {
						this.result.is_favorite = !this.result.is_favorite;
						let msg = this.result.is_favorite ? '收藏成功' : '已取消收藏';
						this.$alert(msg, 'success');
					} else {
						this.$alert(res.msg, 'warning');
					}
				}
			});
		},
		/**
         * 初始化添加评论
         */
		initAddComment(status) {
			if (status) {
				this.$app.initLogin();
			}
			this.showAddComment = status;
			this.commentContent = '';
			if (this.replyCommentId > 0) {
				this.replyCommentId = 0;
				this.replyNickname = '';
			}
			setTimeout(() => {
				this.addCommentFocus = status;
			}, 200);
		},
		/**
         * 添加评论或回复
         */
		addCommentOrReply() {
			if (this.commentContent == '') {
				this.$alert('评论内容不能为空');
				return;
			}
			if (this.replyCommentId > 0) {
				this.addReply();
			} else {
				this.addComment();
			}
		},
		/**
         * 添加评论
         */
		addComment() {
			this.ajax({
				url: this.$api.article.addComment,
				data: {
					article_id: this.id,
					content: this.commentContent,
				},
				method: 'POST',
				dataType: 'json',
				success: res => {
					if (res.code == 0) {
						this.comment = res.data;
						this.showAddComment = false;
						this.commentContent = '';
						this.$alert('评论成功');
					} else {
						this.$alert(res.msg);
					}
				}
			});
		},
		/**
         * 初始化回复
         */
		initAddReply(comment_id, nickname) {
			this.initAddComment(true);
			this.replyCommentId = comment_id;
			this.replyNickname = nickname;
		},
		/**
         * 添加回复
         */
		addReply() {
			if (this.commentContent == '') {
				this.$alert('回复内容不能为空');
				return;
			}
			this.ajax({
				url: this.$api.article.addReply,
				data: {
					comment_id: this.replyCommentId,
					content: this.commentContent,
				},
				method: 'POST',
				dataType: 'json',
				success: res => {
					if (res.code == 0) {
						this.comment = res.data;
						this.showAddComment = false;
						this.replyCommentId = 0;
						this.replyNickname = '';
						this.commentContent = '';
						this.$alert('评论成功');
					} else {
						this.$alert(res.msg);
					}
				}
			});
		},
		/**
         * 打开外部链接
         */
		openLink(url) {
			console.log(url);
			window.location.href = url;
		},
		/**
         * 分享
         */
		share() {
			// #ifdef MP
			uni.showShareMenu();
			// #endif
		},
		/**
         * 跳转至评论详情
         */
		redirectCommentDetail(id, replyCount) {
			if (replyCount > 0) {
				uni.navigateTo({
					url: 'commentDetail?id=' + id
				});
			}
		},
		/**
         * 复制
         */
		copyText(text) {
			uni.setClipboardData({
				data: text,
				success: res => {
					this.$alert('原文链接已复制', 'success');
				}
			});
		},
        /**
         * 瀑布流加载分页，上拉加载的回调: 其中page.num为当前页从1开始, page.size为每页数据条数（默认10）
         */
        upCallback(page) {
            self = this;
            //获取api数据
            this.ajax({
                url: self.api_url,
                data:{
                    page: page.num,
                    pagesize: page.size
                }
            }).then(res => {
                //如果res.list不是object则赋值为空对象[]
                let result = (typeof(res.data.list)=='object')?res.data.list:[];
                let result_length = result.length;
                //如果是第一页，则将列表数据清空
                if(page.num == 1)
                    self.comment = [];
                //数据去重：防止最近产生的新数据导致有重复数据
                result = self.$my.filterSame(result, self.comment);
                //设置列表数据
                self.comment = self.$my.join(self.comment, result); //追加新数据
                //api获取成功，隐藏下拉刷新和上拉加载的状态（延时0.3秒再关闭加载动画，视觉效果更踏实）
                //特别注意: 这里加setimeout延时可能会导致mescroll-more插件 (快速上滑加载分页会异常中断)
                setTimeout(() => {
                    this.mescroll.endSuccess(result_length);
                },10);
            }).catch(()=>{
                //联网失败, 结束加载
                this.mescroll.endErr();
            });
        }
	}
};
</script>

<style lang="scss">
@import 'detail.scss';
</style>